<template>
    <view class="productBox" @click="bindDetail(prod)">
        <view class="titleBox flex">
            <view class="titleWrap flex">
                <view class="title font14 fontBold txtHidden">
                    {{prod.pan.title}}
                </view>
                <text class="stateTxt font10 border-grey bg-F1F1F1 col-4d left-10" v-if="prod.currDate === 'before'">认购即将开始</text>
                <text class="stateTxt font10 border-error bg-FDF3F3 col-error left-10" v-else-if="prod.currDate === 'ongoing'">正在认购中</text>
                <text class="stateTxt font10 border-grey bg-F1F1F1 col-4d left-10" v-else>认购已结束</text>
            </view>
        </view>

        <view class="startBox flex font12 top-8">
            <u-icon name="clock-fill" color="#F76464" size="12"></u-icon>
            <block v-if="prod.currDate === 'before'">
                <text class="left-5">认购开始还有{{ stampDays(prod.pan.buy_start_time)}}</text>
            </block>
            <block v-else-if="prod.currDate === 'ongoing'">
                <text class="left-5">认购结束还有{{ stampDays(prod.pan.buy_end_time)}}</text>
            </block>
            <block v-else>
                <text class="left-5">认购已结束</text>
            </block>
        </view>

        <view class="pointsBox flex top-8">
            <view class="renGouLv bg-theme col-fff font13 fontBold">
                <block v-if="prod.pan.buy_ratio">
                    认购率 {{ prod.pan.buy_ratio }}%
                </block>
                <block v-else-if="prod.pan.guess_buy_ratio">
                    认购率 {{ prod.pan.guess_buy_ratio }}%
                </block>
                <block v-else-if="prod.pan.guess_reg_ratio || prod.pan.guess_pay_ratio">
                    <view class="">
                        预约认购率 {{prod.pan.guess_reg_ratio?prod.pan.guess_reg_ratio+'%':'--'}}
                    </view>
                    <view class="top-8">
                        实际认购率 {{prod.pan.guess_pay_ratio?prod.pan.guess_pay_ratio+'%':'--'}}
                    </view>
                </block>
                <block v-else>
                    认购率 --
                </block>
            </view>
            <view class="renGouCount flex bg-yellow-opacity">
                <view>
                    <view v-if="prod.pan.buy_group">
                        总认购数：<text>{{ formatNumber(prod.pan.buy_group) }}</text>
                    </view>
                    <view v-else-if="prod.pan.guess_buy_group">
                        总认购数：<text>{{ formatNumber(prod.pan.guess_buy_group) }}</text>
                    </view>
                    <block v-else-if="prod.pan.guess_reg_group || prod.pan.pay_ratio">
                        <view class="">
                            预约认购：<text>{{prod.pan.guess_reg_group | formatNumber}}</text>
                        </view>
                        <view class=" top-8">
                            实际认购：<text>{{prod.pan.pay_ratio | formatNumber}}</text>
                        </view>
                    </block>
                    <view v-else>
                        总认购数：--
                    </view>
                </view>
                
                <view class="left-15">
                    房源数：{{prod.pan.house_count?prod.pan.house_count:'--'}}套
                </view>
            </view>
        </view>

        <view class="sheBaoWrap font12">
            <text>社保系数: {{ prod.pan.bao_ratio || '--' }}</text>
            <text class="left-10">入围比: {{ prod.pan.ruwei_ratio || '--' }}</text>

            <view class="renGouLineGroup bg-fff" v-if="renGouProgress > 90">
                <view class="text-left font12 fontBold">{{ chuFaTxt }}</view>
                <block v-if="jiFenMax === 130">
                    <view class="XSJFLine lineTxtWrap flex" :class="{'activeWrap':renGouProgress >= 130 && renGouProgress >= jiFenMax}" :style="{left: `calc(${(135/lineMaxVal)*100}% - ${lineWidth}px + ${speedWidth}px)`}">
                        <text class="tipWrap font10 border-grey text-center bg-fff">限售&积分线</text>
                        <view class="dashedLine lineDefHeight"></view>
                        <view class="circleWrap bg-fff"></view>
                    </view>
                </block>
                <block v-else>
                    <view class="xianShLine lineTxtWrap flex" :class="{'activeWrap':renGouProgress >= 130}" :style="{left: `calc(${(135/lineMaxVal)*100}% - ${lineWidth/2}px + ${speedWidth}px)`}">
                        <text class="tipWrap font10 border-grey text-center bg-fff">限售130%</text>
                        <view class="dashedLine lineDefHeight"></view>
                        <view class="circleWrap bg-fff"></view>
                    </view>
                    
                    <view class="jifenLine lineTxtWrap flex" :class="{'activeWrap':renGouProgress >= jiFenMax}" :style="{left: `calc(${(jiFenMax/lineMaxVal)*100}% - ${lineWidth/2}px + ${speedWidth}px)`}" v-if="jiFenMax && lineMaxVal">
                        <text class="tipWrap font10 border-grey text-center bg-fff">积分{{ jiFenMax }}%</text>
                        <view class="dashedLine" :class="(jiFenMax - 130) > 60 ? 'lineDefHeight':'lineActHeight'"></view>
                        <view class="circleWrap bg-fff"></view>
                    </view>
                </block>

                <view class="lineProgWrap bg-e7 top-8">
                    <view class="progActi" :style="{width: `calc(${(lineMaxVal ? (renGouProgress / lineMaxVal)*100 : 0)}% + ${speedWidth}px)`}"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { surplusDays } from '@/common/common';

	export default {
		data() {
			return {
			};
		},

        props:{
			prod: {
				value: Object,
				default: {}
			}
        },

        computed:{
            //触发积分轴线的计算比例
            lineMaxVal: function() {
                let renGouRatio = parseFloat(this.prod.pan?.buy_ratio || this.prod.pan?.guess_buy_ratio) || 0;
                const jiFenNum = parseFloat(this.prod.pan?.ruwei_ratio) * 100 || 0;
                const MaxNum = Math.max(130, renGouRatio, jiFenNum);
                if(!MaxNum) return 0;
                return MaxNum + MaxNum*.2;
            },

            //积分线
            jiFenMax: function() {
                let ratio = parseFloat(this.prod.pan?.ruwei_ratio);
                if(!ratio) return 0;
                return ratio * 100
            },

            //认购率,认购进度条宽度
            renGouProgress: function() {
                let ratio = parseFloat(this.prod.pan?.buy_ratio || this.prod.pan?.guess_buy_ratio);
                if(!ratio) return 0;
                return ratio
            },

            //积分线宽度
            lineWidth: function() {
                return uni.upx2px(120)
            },

            //预留宽度避免遮挡文字
            speedWidth: function() {
                return uni.upx2px(40)
            },

            //触发/未触发限售和积分文本
            chuFaTxt: function() {
                let ratio = parseFloat(this.prod.pan?.buy_ratio || this.prod.pan?.guess_buy_ratio);
                if(!ratio) return '';
                let exceedXianShou = ratio >= 130;
                let exceedJiFen = ratio >= this.jiFenMax;
                if(exceedXianShou && exceedJiFen) {
                    return '已触发积分&限售'
                }
                if(exceedJiFen) {
                    return '已触发积分'
                }
                if(exceedXianShou) {
                    return '已触发限售'
                }
                return '未触发限售'
            }
        },
        
		methods: {
            stampDays(date_){
                if(date_ && date_ !== null) {
                    let transDate = surplusDays(date_);
                    if(transDate) {
                        return `${transDate.day>0?transDate.day+'天':''}${transDate.hour>0?transDate.hour+'小时':''}${transDate.minu>0?transDate.minu+'分':''}`
                    }
                    return 0
                }
                return ''
            },

            formatNumber(num) {
                return num > 0 ? (num>=10?Math.floor(num/10)*10+'+' : '<10') : '--'
            },

			//认筹详情
            bindDetail(info){
                uni.navigateTo({
                    url: `/pages/products/rengou-jiance/detail?productId=${info.id}&kaiId=${info.pan.id}&title=${info.title}`
                })
            }
		}
	};
</script>

<style lang="scss">
	.productBox{
        margin: 0rpx 28rpx;
        padding: 28rpx 0rpx;
        .titleBox{
            justify-content: space-between;
            .titleWrap{
                width: 100%;
                justify-content: flex-start;
                .title{
                    max-width: calc(100% - 170rpx);
                }
                .stateTxt{
                    padding: 4rpx 10rpx;
                }
            }
        }

        .startBox{
            justify-content: flex-start;
        }
        .height-60{
            height: 60rpx;
            line-height: 60rpx;
        }
        .pointsBox{
            justify-content: space-between;
            align-items: stretch;
            .renGouLv{
                width: 30%;
                padding: 15rpx 0 15rpx 20rpx;
            }
            .renGouCount{
                width: 70%;
                padding: 15rpx 0 15rpx 20rpx;
                justify-content: flex-start;
            }
        }
        .sheBaoWrap{
            padding: 16rpx 20rpx;
            border: 2rpx solid rgba(0,0,0,.07);
        }
        .renGouLineGroup{
            padding: 40rpx 0 20rpx 0;
            position: relative;
            .XSJFLine{
                min-width: 140rpx;
            }
            .xianShLine,.jifenLine{
                min-width: 120rpx;
            }
            .lineTxtWrap{
                z-index: 5;
                bottom: 11rpx;
                position: absolute;
                flex-direction: column;
                .tipWrap{
                    width: 100%;
                    padding: 6rpx 0;
                    color: #8A8A8A;
                    border-radius: 10rpx;
                }
                .dashedLine{
                    border-right: 2rpx solid #E7E7E7;
                }
                .lineDefHeight{
                    height: 10rpx;
                }
                .lineActHeight{
                    height: 50rpx;
                }
                .circleWrap{
                    width: 30rpx;
                    height: 30rpx;
                    border-radius: 50%;
                    border: 6rpx solid #E7E7E7;
                }
            }
            .activeWrap{
                .tipWrap{
                    color: #007235;
                }
                .circleWrap{
                    border: 6rpx solid #007235;
                }
            }
            .lineProgWrap{
                height: 8rpx;
                .progActi{
                    max-width: 100%;
                    height: 8rpx;
                    background-color: $theme-color;
                }
            }
        }
    }
</style>
